<script setup name="min-music">
import { ref, computed } from 'vue'
import { usePlayStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { ShuffleOne, PlayOnce, PlayCycle, AddMusic, Download, DeleteFive } from '@icon-park/vue-next'
import { showToast, showConfirmDialog } from 'vant'
import IconPark from '@/components/common/IconPark.vue'

const { playlist, playIndex, isPlayer, isShowPopup } = storeToRefs(usePlayStore())
const playStore = usePlayStore()

// 当前选中标签的标识符
const active = ref('current')
isShowPopup.value = false
// 0: 顺序播放，1: 循环播放，2: 随机播放
const mode = ref(0)
const playerMode = [
  { model: "顺序播放", icon: PlayCycle },
  { model: "单曲循环", icon: PlayOnce },
  { model: "随机播放", icon: ShuffleOne }
]
// 当前播放模式
const modeText = computed(() => playerMode[playStore.info.playMode])

// 移除歌曲
const removeSong = (index) => {
  const newPlaylist = [...playlist.value]
  newPlaylist.splice(index, 1)
  if (index < playIndex.value) {
    playStore.setPlayIndex(playIndex.value - 1)
  }
  playStore.setPlaylist(newPlaylist)
}

// 清空播放列表
const clearPlaylist = () => {
  playStore.setPlaylist([])
}

// 更改播放模式
const toggleMode = () => {
  mode.value === 2 ? mode.value = 0 : mode.value++
  // 修改 store 中的 playMode
  playStore.info.playMode = mode.value
  // 保持 mode.value 和 playStore.info.playMode 同步
  mode.value = playStore.info.playMode
  // 弹窗提醒
  showToast(modeText.value.model)
}
const showConfirm = () => {
  showConfirmDialog({
    message: '确定要清空播放列表吗？',
    confirmButtonText: '清空',
    confirmButtonColor: 'red',
    overlay: false,
  })
    .then(() => clearPlaylist())
    .catch(() => { })
}
</script>

<template>
  <van-popup v-model:show="isShowPopup" round position="bottom"
    :style="{ height: '62vh', backgroundColor: `var(--color-background)` }">
    <van-tabs v-model:active="active" swipeable sticky shrink line-width="20px" color="red" offset-top="38vh">
      <van-tab title="历史播放" name="history">
        历史播放
      </van-tab>
      <van-tab :title="`当前播放 (${playlist.length})`" name="current">
        <van-cell>
          <template #title>
            <van-button round @click="toggleMode" size="mini">
              <div class="playIcon">
                <IconPark :icon="modeText.icon" :strokeWidth="3" :size="4" />
                <span>{{ modeText.model }}</span>
              </div>
            </van-button>
          </template>

          <template #value>
            <div class="actions-icon">
              <IconPark :icon="Download" :size="5" :strokeWidth="3" />
              <IconPark :icon="AddMusic" :size="5" :strokeWidth="3" />
              <IconPark :icon="DeleteFive" :size="5" :strokeWidth="3" @click="showConfirm" />
            </div>
          </template>
        </van-cell>

        <van-cell v-for="(item, index) in playlist" :key="item.id" @click="playStore.selectPlay([item])">
          <template #title>
            <van-row gutter="24" class="songinfo">
              <van-col class="songinfo-index" span="3">{{ index + 1 }}</van-col>
              <van-col class="songinfo-name" :class="{ 'active': item.id === playlist[playIndex].id && !isPlayer }"
                span="21">
                <van-text-ellipsis :content="item.name" rows="1" />
              </van-col>
            </van-row>
          </template>

          <template #label>
            <div class="author">
              <span v-for="(item1, i) in item.singer" :key="item1.id">
                {{ item1.name }}
                <span v-if="i !== item.singer.length - 1"> & </span>
              </span>
            </div>
          </template>

          <template #value>
            <van-icon name="cross" size="20" @click.stop="removeSong(index)" />
          </template>
        </van-cell>

        <van-empty v-if="!playlist.length" description="当前播放列表空空如也~" />
      </van-tab>
    </van-tabs>
  </van-popup>
</template>

<style scoped lang="scss">
.van-cell {
  background-color: var(--color-background);
  opacity: .9;
  color: var(--reversal-text);
  font-size: 12px;

  .songinfo {
    &-index {
      color: var(--vt-c-info-text);
    }

    &-name {
      padding-left: 0 !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: var(--reversal-text);

      &.active {
        color: red;
      }
    }
  }

  .van-icon {
    margin-top: 10px;
  }

  .author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 240px;
    font-size: 10px;
  }

  .van-button--mini {
    line-height: 1;
    color: var(--reversal-text);
    background-color: var(--color-background);

    .playIcon {
      display: flex;
      align-items: center;
      line-height: 1;

      .i-icon {
        margin-right: 4px;
      }

      span {
        font-size: 10px;
        transform: scale(.9);
      }
    }
  }

  .actions-icon {
    line-height: 1;
    width: 180px;
    display: flex;
    justify-content: end;
    color: var(--reversal-text);

    .i-icon {
      margin: 8px 8px 0 8px;
    }
  }

  :deep(.van-cell__label) {
    padding-left: 36px;
    margin-top: 0;
  }

  &::after {
    content: none;
  }
}

:deep(.van-tabs__nav--line) {
  background-color: var(--color-background);
}

:deep(.van-tabs__nav) {
  justify-content: center;
}

:deep(.van-tab--active) {
  color: var(--reversal-text);
}

:deep(.van-tabs__line) {
  bottom: 6vw;
}

:deep(.van-tabs__wrap) {
  border-radius: var(--van-popup-round-radius) var(--van-popup-round-radius) 0 0;
}
</style>